<template>
  <div id="app">
    <div class="main_title">{{ huod.name }}</div>
    <div class="main_container">
      <div class="main_left">
        <div class="left_top">
          <a href="#"
             class="t_total">应到人数: {{yingdryList.length}}</a>
          <a href="#"
             class="t_have">已到人数: {{yidrs}}</a>
          <a href="#"
             class="t_lack">未到人数: {{weidrs}}</a>
        </div>

        <div class="left_info">
          <div class="info_head">
            <div class="img_head">
              <img :src="dangqslry.toux" />
            </div>
          </div>
          <div class="info_contont">
            <p>
              姓名: {{dangqslry.xingm}}<br />
              学号：{{dangqslry.xueh}}<br />
              部门：{{dangqslry.bum}}<br />
            </p>
          </div>
        </div>
      </div>

      <div class="main_right">
        <div class="right_content">
          <div class="right_list">
            <div v-for="item in yingdryList"
                 :key="item.id">
              <div :class="item.sign ? 'pe_item' : 'pe_item item_unselected'">
                <div class="item_info">
                  <img :src="item.toux"
                       width="30%" />
                  <p class="item_jz">
                    姓名: {{item.xingm}}<br />
                    学号：{{item.xueh}}<br />
                    部门：{{item.bum}}<br />
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _http from './httpService'

export default {
  name: 'App',
  components: {},
  data() {
    return {
      huod: {},
      loading: false,
      yingdryList: [],
      dangqslry: {},
      yidrs: null,
      weidrs: null,
    }
  },
  created() {
    this.loadData()
  },

  mounted() {
    let that = this

    _http.get('/renldmHuod/anRenldmHuod/getActiveHuod', {}).then((res) => {
      if (res.data.success) {
        that.huod = res.data.result

        _http
          .get('/renldmHuodReny/agRenldmHuodReny/yingdryList', {
            params: {
              huodId: that.huod.id,
            },
          })
          .then((res) => {
            if (res.data.success) {
              that.yingdryList = res.data.result
              that.yidrs = 0
              that.weidrs = res.data.result.length
            }
          })
      }
    })

    setInterval(that.loadData, 3000)
  },

  methods: {
    loadData() {
      let that = this

      _http
        .get('/renldmHuodSign/agRenldmHuodSign/list', {
          params: {
            huod: that.huod.id,
          },
        })
        .then((res) => {
          if (res.data.success) {
            res.data.result.records.forEach((element) => {
              that.yingdryList.forEach((element2) => {
                if (element.reny == element2.reny) {
                  element2.sign = true
                  that.dangqslry = element2
                }
              })

              that.yidrs = res.data.result.records.length
              that.weidrs = that.yingdryList.length - that.yidrs

              that.$forceUpdate()
            })
          }
        })
    },
  },
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
a {
  text-decoration: none;
  color: #fff;
}
body {
  font-family: 'PFJ', 'Arial', 'Microsoft YaHei', sans-serif;
  color: #fff;
}
@media screen and (max-width: 1280) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 1280) and (max-width: 1920) {
  html {
    font-size: 14px;
  }
}

/* @font-face {
  font-family: "PFJ";
  src: url("../font/PingFang.ttc");
  font-style: normal;
  font-weight: normal;
} */

/** 滚动条 **/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button:vertical {
  display: none;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: #000f;
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(88, 218, 253, 0.3);
}
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: rgba(88, 218, 253, 0.3);
}
::-webkit-scrollbar-thumb:vertical:active {
  background-color: rgba(88, 218, 253, 0.3);
}

body {
  width: 100vw;
  height: 100vh;
  background: url('./assets/img/bg_rc.png') no-repeat;
  background-size: 100% 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.main_container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  justify-content: space-between;
}
.main_title {
  color: #58dafd;
  font-size: 30px;
  text-align: center;
  margin: 10px auto;
}
.main_left,
.main_right {
  /* width: 100vw; */
  height: 100vh;
  width: 50%;
  margin-top: 2.5%;
  box-sizing: border-box;
  margin-bottom: 8%;
  overflow-y: auto;
}

.left_top {
  height: 7vh;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding-left: 8%;
  margin-top: 1.5%;
}
.left_top a {
  display: inline-block;
  width: 241px;
  height: 81px;
  background-size: 241px 81px;
  font-size: 0.8;
  box-sizing: border-box;
  padding: 18px 6px 26px 65px;
  letter-spacing: 2px;
}
.left_top .t_total {
  width: 382px;
  height: 86px;
  background: url('./assets/img/tab_total.png') no-repeat;
  background-size: cover;
  background-size: 193px 69px;
}

.left_top .t_have {
  width: 382px;
  height: 86px;
  background: url('./assets/img/tab_have.png') no-repeat;
  background-size: 193px 69px;
}

.left_top .t_lack {
  width: 382px;
  height: 86px;
  background: url('./assets/img/tab_lack.png') no-repeat;
  background-size: 193px 69px;
}

.left_info {
  /* height: 86px; */
  margin-top: 10px;
  width: 54vw;
}
.info_head {
  width: 24vw;
  height: 48vh;
  background: url('./assets/img/bor_selected.png') no-repeat;
  box-sizing: border-box;
  background-size: 100% 100%;
  /* margin-bottom: 10px; */
  position: relative;
  align-content: center;
  margin: 0 auto;
  margin-top: 60px;
}
.info_head .img_head {
  align-content: center;
  width: 22vw;
  height: 43vh;
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
  padding-top: 2.5vh;
  margin: 0 auto;
}
.info_head .img_head img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-size: 100% 100%;
}

.info_contont {
  margin: 0 auto;
  height: 26vh;
  font-size: 22px;
  line-height: 6vh;
  letter-spacing: 2px;
  display: flex;
  justify-content: center;
  margin-top: 2vh;
  margin-left: -7vw;
}
.right_content {
  margin-top: 10px;
  width: 78%;
  height: 84%;
  margin-left: 8%;
  padding: 0 20px;
  overflow: auto;
}
.right_list {
  width: 100%;
  margin: 0 auto;
  /* margin-bottom: 50px; */

  /** key words*/
  /* display: grid; */
  /**指定重复元素的宽度*/
  grid-template-columns: repeat(auto-fill, 360px);
  justify-content: space-between;
  grid-gap: 10px;
}
.right_list .pe_item {
  /* width: 49%; */
  /* display: inline-block; */
  height: 14vh;
  /* background: url('./assets/img/bor_selected.png') no-repeat; */

  box-sizing: border-box;
  width: 18vw;
  background-size: 100% 100%;
  margin-bottom: 10px;
  float: left;
  margin-left: 10px;
}
.pe_item .item_info {
  height: 99%;
  display: flex;
  background-size: 100% 100%;
  align-items: center;
  background-color: rgba(88, 218, 253, 0.35);
  padding-left: 20px;
}
.pe_item .item_jz {
  height: 91%;
  display: flex;
  align-items: center;
}
.item_unselected {
  background: url('./assets/img/bor_unselected.png');
}
.item_unselected .item_info {
  background-color: rgba(161, 161, 161, 0.2);
}
.pe_item p {
  line-height: 36px;
  font-size: 16px;
  letter-spacing: 2px;
  margin-left: 30px;
}
</style>
